<!--
 * @Author: hq
 * @Date: 2022-05-18 21:23:44
 * @LastEditors: hq
 * @LastEditTime: 2022-05-26 19:32:16
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div>
    <div class="card_con">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in Tabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <div v-if="index === 0">
            <NavConfig></NavConfig>
          </div>
          <div v-if="index === 1">
            <FindGoods></FindGoods>
          </div>
          <div v-if="index === 2">
            <DaPai></DaPai>
          </div>
          <div v-if="index === 3">
            <Banner></Banner>
          </div>
          <div v-if="index === 4">
            <Active></Active>
          </div>
          <div v-if="index === 5">
            <Select></Select>
          </div>
          <div v-if="index === 6">
            <NewGoods></NewGoods>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import NavConfig from "./nav_config.vue";
import FindGoods from "./find_goods.vue";
import DaPai from "./dapai.vue";
import Banner from "./banner_list.vue";
import Active from "./activity.vue";
import Select from "./select.vue";
import NewGoods from "./new_goods.vue";
export default {
  components: { NavConfig, FindGoods, DaPai, Banner, Active, Select, NewGoods },
  data() {
    return {
      activeName: "0",
      Tabs: [
        { title: "导航" },
        { title: "发现好货" },
        { title: "大牌荟选" },
        { title: "轮播" },
        { title: "活动" },
        { title: "精选" },
        { title: "新品" },
      ],
      switchValue: true,
      yuming: "",
      imageUrl: "",
    };
  },
  methods: {
    handleClick(tab) {
      console.log(tab);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.tablescope {
  .el-switch__label--left {
    position: relative;
    left: 55px;
    color: #fff;
    z-index: -1111;
    span {
      font-size: 12px;
    }
  }
  //   .el-switch__core {
  //     width: 50px !important;
  //   }
  .el-switch__label--right {
    position: relative;
    right: 55px;
    color: #fff;
    z-index: -1111;
    span {
      font-size: 12px;
    }
  }
  .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  .el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c !important;
  }
}
</style>
